<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jQuery3.4.1.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<style type="text/css">
		.header{
			background-color: #0062CC;
			width: 100%;
		}
		.logo{
			margin: 15px 0;
		}
		#menu{
			margin: 15px
		}
		.line{
			display: block;
			background-color: white;
		}
		.dropdown-item{
			text-align: center;
		}
	</style>
	<body>
		<div class="header">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-3">
						<div class="logo">
							<a href="#">
								<img src="img/Hbut_logo.png" class="img-fluid" >
							</a>
						</div>
					</div>
					<!-- 右侧导航 -->
					<div class="col-12 col-md-9">
						<nav class="navbar navbar-dark navbar-expand-md">
							<!-- 汉堡包导航 -->
							<button type="button" class="navbar-toggler"  data-toggle='collapse' data-target='#menu'>
								<span class="navbar-toggler-icon"></span>
							</button>
							<!-- 水平菜单 -->
							<div class="collapse navbar-collapse" id="menu">
								<ul class="navbar-nav">
									<li class="nav-item">
										<!-- 触发器 -->
										<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">学校概况</a>
										<!-- 下拉菜单的菜单 -->
										<div class="dropdown-menu">
											<span class="line"></span>
											<a href="#" class="dropdown-item">学校介绍</a>
											<a href="#" class="dropdown-item">领导介绍</a>
											<a href="#" class="dropdown-item">学校章程</a>
											<a href="#" class="dropdown-item">校园文化</a>
										</div>
									</li>
									<li class="nav-item"><a href="#" class="nav-link">组织机构</a></li>
									<li class="nav-item"><a href="#" class="nav-link">教育教学</a></li>
									<li class="nav-item"><a href="#" class="nav-link">学科科研</a></li>
									<li class="nav-item"><a href="#" class="nav-link">师资队伍</a></li>
									<li class="nav-item"><a href="#" class="nav-link">招生就业</a></li>
									<li class="nav-item"><a href="#" class="nav-link">国际交流</a></li>
									<li class="nav-item"><a href="#" class="nav-link">信息公开</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
